<!-- 
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-09-13 14:53:14
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '党建',
  },
}
</route>
<template>
  <view class="bg-#F6F6F6 overflow-auto w-100% h-screen p-20rpx box-border overflow-auto">
    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper indicator-dots circular autoplay>
        <swiper-item v-for="item in bannerList" :key="item.id">
          <image :src="item.attachmentUrl"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 消息通知 -->
    <view class="bg-#fff border-rd-36rpx p-20rpx message mt-20rpx">
      <view class="flex items-center justify-between">
        <view class="message-img w-54rpx h-66rpx">
          <image src="../../static/images/building-message.png"></image>
        </view>
        <view class="message-line"></view>
        <view class="scrollable-area" style="height: 92rpx; overflow-y: auto">
          <view
            class="flex items-center justify-between mb-12rpx"
            v-for="item in messageList"
            :key="item.id"
            @click="handleDetail(item.id)"
          >
            <view class="message-notice">{{ item.imageTextType }}</view>
            <view class="message-title">{{ item.topic }}</view>
            <wd-icon name="arrow-right" size="28rpx"></wd-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 党员学习 -->
    <view class="bg-#fff border-rd-14rpx p-20rpx mt-20rpx">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <view class="study-a">党员</view>
          <view class="study-b">学习</view>
          <view class="study-title">深化学习，提升党员战斗力</view>
        </view>
        <view class="flex items-center study-btn">
          <wd-button
            type="text"
            class="study-btn"
            @click="handleMore('/pages/PartyBuilding/studyMore')"
          >
            更多
          </wd-button>
          <wd-icon name="arrow-right"></wd-icon>
        </view>
      </view>
      <view v-for="(item, index) in studyList" :key="item.id">
        <view class="flex items-center justify-between study-cont">
          <view class="w-156rpx h-120rpx mr-18rpx">
            <image :src="item.coverImage"></image>
          </view>
          <view class="study-content">
            <view class="study-tit mb-12rpx">{{ item.title }}</view>
            <view class="flex items-center justify-between">
              <view class="study-time">{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm') }}</view>
              <view>
                <!-- <wd-button plain hairline @click="handleStudy(item)">前往学习</wd-button> -->
                <view
                  class="px-20rpx py-10rpx bg-#F05619 text-#fff text-28rpx border-rd-16rpx"
                  @click="handleStudy(item)"
                >
                  前往学习
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="index < studyList.length - 1" class="study-line"></view>
      </view>
    </view>
    <!-- 新闻 -->
    <view class="bg-#fff border-rd-14rpx p-20rpx mt-20rpx">
      <wd-tabs v-model="tab" slidable-num="4" @click="handleClick">
        <block v-for="(classItem, index) in classList" :key="classItem.id">
          <wd-tab :title="classItem.label" :name="`tab-${index}`">
            <view v-if="showContent">
              <block v-for="(contentItem, contentIndex) in contentList" :key="contentItem.id">
                <view class="mb-40rpx" @click="handleNews(contentItem.id)">
                  <view class="flex items-center justify-between">
                    <view class="w-500rpx">
                      <view class="tab-title">{{ contentItem.topic }}</view>
                      <view class="flex items-center tab-time">
                        <view class="mr-20rpx">
                          {{ formatTime(contentItem.createTime, 'yyyy-MM-dd HH:mm:ss') }}
                        </view>
                        <view>
                          <wd-icon name="" size="28rpx"></wd-icon>
                        </view>
                        <view>阅读量：{{ contentItem.viewerCount }}</view>
                      </view>
                    </view>
                    <view class="w-158rpx h-110rpx border-rd-8rpx">
                      <image
                        class="w-100% h-100% border-rd-12rpx"
                        :src="contentItem.coverPhotoUrl"
                        mode="aspectFill"
                      ></image>
                    </view>
                  </view>
                  <view class="tab-line"></view>
                </view>
              </block>
            </view>
            <view v-else class="no-content">暂无咨询</view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  getbannerPage,
  getNews,
  getNewsContent,
  getStudy,
  getMessage,
  getMessageClass,
} from '@/service/partBuilding/index'
import { formatTime } from '@/utils/index'
const state = ref<string>('loading')
const tab = ref<number>(0)
const classList = ref([])
const contentList = ref([])
const showContent = ref(true)
const imageList = ref([])
const pages = reactive({
  pageNo: 1,
  pageSize: 100,
  carouselImageType: '党建首页',
})
const max = ref<number>(60)
const bannerList = ref([])
const studyList = ref([])
const messageList = ref([])
const saveId = ref()
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
// 首页轮播
async function getbannerList() {
  const data: any = await getbannerPage({ ...pages })
  bannerList.value = data.data.list
  max.value = data.data.total
  bannerList.value = bannerList.value.map((item) => {
    item.attachmentUrl = `${baseurl.value}${item.attachmentUrl}`
    return item
  })
}
const study = reactive({
  pageNo: 1,
  pageSize: 100,
  type: '',
  status: 0,
  userId: 0,
})
// 获取党员学习列表
async function getStudyList() {
  const data: any = await getStudy({ ...study })
  studyList.value = data.data.list
  studyList.value = studyList.value.map((item) => {
    item.coverImage = `${baseurl.value}${item.coverImage}`
    return item
  })
  studyList.value = studyList.value.slice(0, 2)
}
const message = reactive({
  pageNo: 1,
  pageSize: 100,
  noticeType: 0,
})
// 获取通知公告列表(5条)
async function getMessageList() {
  const data: any = await getMessage({ ...message })
  messageList.value = data.data.list.filter((item) => item.isDisplayViewer)
  const params = reactive({
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_image_text_type',
  })
  const list: any = await getMessageClass({ ...params })
  imageList.value = list.data.list
  messageList.value = messageList.value.map((item) => {
    const matchingMessage = imageList.value.find((msg) => msg.id === item.imageTextType)
    if (matchingMessage) {
      return { ...item, imageTextType: matchingMessage.label }
    }
    return item
  })
}

// 跳转详情
const handleDetail = (id) => {
  uni.navigateTo({
    url: '/pages/PartyBuilding/NotificationDetails?id=' + id,
  })
}
// 党建要闻
const handleNews = (id) => {
  uni.navigateTo({
    url: '/pages/PartyBuilding/BuildingNews?id=' + id,
  })
}
const params = reactive({
  pageNo: 1,
  pageSize: 100,
  dictType: 'countryside_article_type',
})
// 获取咨询tab
async function getClassifyList() {
  const data: any = await getNews({ ...params })
  classList.value = data.data.list
  //   max.value = data.data.total
  if (classList.value.length > 0) {
    record.partyBuildingNewsType = Number(classList.value[0].id)
    getContent()
  }
}
const record = reactive({
  pageNo: 1,
  pageSize: 100,
  partyBuildingNewsType: 0,
})
// tab
const handleClick = (e) => {
  tab.value = e.index
  classList.value.forEach((item, index) => {
    if (index === tab.value) {
      record.partyBuildingNewsType = Number(item.id)
    }
  })
  getContent()
}

// 获取资讯内容
async function getContent() {
  const data: any = await getNewsContent({ ...record })
  contentList.value = data.data.list.filter((item) => item.isDisplayViewer)
  showContent.value = contentList.value.length > 0
  contentList.value = contentList.value.map((item) => {
    item.coverPhotoUrl = `${baseurl.value}${item.coverPhotoUrl}`
    return item
  })
}
// 测试 uni API 自动引入
onLoad(() => {
  getbannerList()
  getClassifyList()
  getMessageList()
  uni.getStorageInfo({
    success: function () {
      // 单独获取 'user' 键的值
      uni.getStorage({
        key: 'user',
        success: function (res) {
          const data = JSON.parse(res.data)
          saveId.value = data.userInfo.residentId
          study.userId = saveId.value
          getStudyList()
        },
        fail: function (err) {
          console.error('获取 user 失败:', err)
        },
      })
    },
  })
})
const handleMore = (url) => {
  uni.navigateTo({ url })
}
// 前往学习
const handleStudy = (val) => {
  const params = reactive({
    id: val.id,
    title: val.title,
    isQuizRequired: val.isQuizRequired,
    createTime: val.createTime,
  })
  uni.navigateTo({
    url: `/pages/PartyBuilding/TobeDetail?id=${params.id}&title=${params.title}&isQuizRequired=${params.isQuizRequired}&createTime=${params.createTime}`,
  })
}
</script>
<style lang="scss">
.swiper-container {
  width: 100%;
  height: 400rpx;
}
.message-line {
  height: 80rpx !important;
  margin: 0px 10rpx;
  border-right: 2rpx solid #ccc;
}
.message-notice {
  padding: 0 6rpx;
  margin-right: 18rpx;
  font-size: 20rpx;
  line-height: 36rpx;
  color: rgba(207, 57, 57, 1);
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(207, 57, 57, 1);
  border-radius: 30rpx;
}
.message-title {
  width: 430rpx;
  margin-right: 20rpx;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 1);
  text-align: justify;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.study-a {
  padding: 6rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  background-color: rgba(231, 51, 26, 1);
  border: 2rpx solid rgba(231, 51, 26, 1);
  border-radius: 4rpx;
  box-sizing: border-box;
}
.study-b {
  padding: 6rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  background-color: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(187, 187, 187, 1);
  border-radius: 4rpx;
  box-sizing: border-box;
}

.study-title {
  font-size: 20rpx;
  line-height: 30rpx;
  color: rgba(146, 146, 146, 1);
  text-align: left;
}

::v-deep.wd-button.is-text {
  font-size: 26rpx !important;
  line-height: 40rpx !important;
  color: rgba(146, 146, 146, 1) !important;
  text-align: left;
}

.study-btn {
  .wd-icon-arrow-right:before {
    font-size: 28rpx;
    line-height: 40rpx;
    color: rgba(146, 146, 146, 1) !important;
  }
}
.study-content {
  .study-btn {
    font-size: 26rpx !important;
    color: rgba(255, 255, 255, 1) !important;
    text-align: center;
    background-color: rgba(240, 86, 25, 1);
    border: 0 !important;
    border-radius: 8rpx;
    padding: 12rpx 30rpx;
  }
  .wd-button.is-medium.is-round {
    min-width: 130rpx;
  }
}
.study-tit {
  width: 546rpx;
  height: 52rpx;
  overflow: hidden;
  font-size: 32rpx;
  line-height: 46rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.study-time {
  font-size: 26rpx;
  line-height: 40rpx;
  color: rgba(146, 146, 146, 1);
  text-align: left;
}
.study-line {
  margin: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
::v-deep.wd-tabs__line {
  display: none;
}
::v-deep.wd-tabs__nav-item.is-active {
  margin-bottom: 8rpx;
  font-weight: normal !important;
  color: rgba(207, 57, 57, 1) !important;
  border-bottom: 6rpx solid rgba(207, 57, 57, 1);
}
::v-deep.wd-tabs__nav-item {
  height: 64rpx !important;
  font-size: 32rpx !important;
}
::v-deep.wd-tabs__nav {
  margin-bottom: 20rpx;
}
::v-deep.wd-tabs.is-slide .wd-tabs__nav-item {
  padding: 0 !important;
}

::v-deep.wd-tabs__nav-item {
  margin: 0 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep.wd-tabs__nav-item:first-child {
  margin-left: 0px;
}
.tab-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 40rpx;
  color: rgba(10, 10, 10, 1);
  text-align: left;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tab-time {
  font-size: 26rpx;
  line-height: 40rpx;
  color: rgba(146, 146, 146, 1);
  text-align: left;
}
.tab-line {
  margin: 20rpx 0;
  border-bottom: 2rpx solid #ccc;
}
.scrollable-area::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.no-content {
  margin-top: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(146, 146, 146, 1);
  text-align: center;
}
</style>
